<template>
  <div class="videoCourse">
    <div class="topbg">
      <div class="wrap">
        <div class="flex main">
          <div class="video">
            <img src="@/assets/images/play.png" alt="" class="video_pic" />
          </div>
          <div class="course-info">
            <h2>交互界面设计系统教程交互界面设计 系统教程交互界面设计</h2>
            <div class="signup">
              <div class="btn">
                <el-button type="primary">免费报名</el-button>
                <el-button type="warning" class="yellow" @click="chat()">课程咨询</el-button>
              </div>
              <div class="sao">
                <img
                  src="@/assets/images/code.png"
                  alt=""
                  style="display: inline-block; vertical-align: middle"
                />
                &nbsp;扫一扫学习
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 课程章节 -->
    <div class="wrap flex">
      <div class="course-list coursetab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程章节" name="first">
            <div class="list">
              <div class="title">
                <h4>{{ title }}</h4>
                <span class="col9">共5节 2小时30分</span>
              </div>
              <ul>
                <li v-for="(item, index) in list"  :key="index" @mouseover="mouseOver()" @click="play(item.id)">
                  <img
                    src="@/assets/images/video_icon.png"
                    alt=""
                    class="icon"
                  />{{ item.name }}
                  <span class="col9">{{item.total_seconds}}</span>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="全部评论" name="second">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="contents"
              maxlength="50"
              show-word-limit
            >
            </el-input>
            <div class="flexbox" style="margin: 20px auto">
              <div> 星级 <el-rate v-model="star" void-color="#ccc"  style="display: inline-block" ></el-rate>
              </div>
              <el-button  type="primary" size="small" round style="padding: 7px 20px" @click="getcomment" >评论</el-button >
            </div>
            <p class="all_cmt">全部评论（156）</p>
            <div class="comment-list">
              <ul>
                <li v-for="(item,index) in cmtList" :key="index">
                  <div class="inner">
                    <div class="who">
                      <img class="avtar" :src="item.avatar" alt="" />
                      <span>{{item.name}}</span>
                    </div>
                    <el-rate
                      v-model="item.mark"
                      disabled
                      disabled-void-color="#ccc"
                      score-template="{item.mark}" >
                      >
                    </el-rate>
                    <p class="cmt-txt">
                      {{item.content}}
                    </p>
                    <div class="cmt-date col9">{{item.comment_time}}</div>
                  </div>
                </li>
               
               
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="pub_right">
        <img src="@/assets/images/logo.png" />
        <h5>安全生产管理人员课程</h5>
        <p class="info col9">
          课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍
        </p>
        <el-button type="primary" class="pub_btn" @click="jump">题库练习</el-button >
        <el-button type="primary" class="pub_btn">模拟考试</el-button>
        <!-- <el-button type="info">信息按钮</el-button> -->
        <el-button type="warning" class="yellow pub_btn">证书考试</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      contents: "",
      star: 5,
      id: 0,
      topVideo:{},
      list: [],
      title: "", //列表页传参
      cmtList: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id
    this.pid = this.$route.query.pid
    this.lm_id = this.$route.query.lm_id //同上面id
    this.title = this.$route.query.name
    this.videoList();
    //  console.log("11".includes(""))
    // this.topVideo()
  },
  methods: {
    handleClick(val) {
      let name = val.name;
      // console.log(name);
      if ((name == "first")) {
        this.videoList();
      } else {
        this.commentList();
      }
    },
    jump() {
      //this.$router.push("/cart")
      //传递的参数用{{ $route.query.goodsId }}获取
      this.$router.push({ path: "/questionBank" });
      //this.$router.go(-2)
      //后退两步
    },
    chat(){
      window.location.href = 'tencent://message/?uin=327883689&Site=Sambow&Menu=yes'
    },
    // topVideo(){
    //     this.$axios.post("/api/index/infovideo").then(res=>{
    //       this.topVideo = res.data[0]
    //       console.log("111",res)
    //     })
    // },
    videoList() {
      this.$axios.post("/api/Course/getCourse", { pid: this.id })
        .then((res) => {
          this.list = res.data.data;
          this.list.forEach(function (item){
            item.total_seconds = Math.floor(item.total_seconds/60) + '分' +(item.total_seconds%60/100).toFixed(2).slice(-2) + '秒'
          })
        });
    },
    play(id){
      this.$router.push({ path: "/playVideo",query:{id:id}});
    },
       getcomment(){
      this.$axios.post("/api/User/comment",{content:this.contents,mark:this.star,lm_id:this.id}).then(res=>{
        console.log(res.data)
        this.commentList()
      })
    },
    commentList(){
      this.$axios.post('/api/User/kcdetail',{lm_id:this.lm_id,xy_id: this.pid}).then(res=>{
        this.cmtList = res.data.data.commont_list
      })
    },
    mouseOver(val){

    }
  },
};
</script>

<style scoped>
.topbg {
  background: url(../../assets/images/videobg.png) no-repeat;
  background-size: cover;
  height: 500px;
  position: relative;
  z-index: 0;
}
.main {
  padding: 87px 0;
}
.video {
  width: 540px;
  height: 341px;
  position: relative;
  background: url(../../assets/images/course.png) no-repeat;
}
.video_pic {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -52px;
  margin-top: -52px;
  cursor: pointer;
}
.yellow {
  background-color: #f09c08;
  font-size: 16px;
}
.course-info h2 {
  font-weight: normal;
}
.course-info {
  display: flex;
  flex: 1;
  color: #fff;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 20px;
}
.course-list {
  width: 70%;
  margin-right: 5%;
  box-sizing: border-box;
  margin-top: 20px;
}
.flex {
  display: flex;
}
.signup {
  display: flex;
  justify-content: space-between;
}
.title {
  display: flex;
  font-size: 20px;
  margin: 30px auto;
  justify-content: space-between;
}
.title h4 {
  font-weight: normal;
}
.list ul {
  margin: 20px auto;
}
.list ul li {
  padding: 15px 10px;
  color: #666;
  font-size: 18px;
  margin: 5px 0;
}
.list ul li span {
  float: right;
}
.list ul li img.icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.list ul li:nth-of-type(odd) {
  background: #f4f4f4;
}
.list ul li:hover {
  background: #cde4fe;
}
.pub_right {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}
.pub_btn {
  display: block;
  margin: 15px 0;
  font-size: 24px;
  border-radius: 30px;
  box-shadow: 2px 3px 7px 0px rgba(58, 58, 58, 0.3);
}
.pub_right h5 {
  font-size: 24px;
  color: #4398f8;
  font-weight: normal;
  margin: 30px 0 20px;
}
.pub_right .info {
  margin: 20px auto;
  font-size: 20px;
  line-height: 28px;
}
.el-rate__item .el-icon-star-on {
  color: rgb(67, 152, 248) !important;
}
.all_cmt {
  background: #f7f7f7;
  margin: 20px auto;
  padding: 10px 0;
  text-align: center;
}
.comment-list ul li {
  position: relative;
  border-bottom: 1px solid #e6e6e6;
  padding: 20px 0;
}
.who {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  margin: 0 auto;
  text-align: center;
}
.avtar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding-bottom: 10px;
  margin: 0 auto;
}
.cmt-txt {
  margin: 10px 0 20px;
}
.inner {
  position: relative;
  padding-left: 120px;
}
</style>